<template>
  <div class="main">
    <ul class="entlist">
      <li>
        <i class="iconfont icon-qiyegongchangjianzhu"></i>
        <h1>新疆扎花厂</h1>
      </li>
      <li>
        <i class="iconfont icon-qiyegongchangjianzhu"></i>
        <h1>内地扎花厂</h1>
      </li>
      <li>
        <i class="iconfont icon-qiyegongchangjianzhu"></i>
        <h1>纺织厂</h1>
      </li>
      <li>
        <i class="iconfont icon-qiyegongchangjianzhu"></i>
        <h1>贸易商</h1>
      </li>
    </ul>
    <van-popup v-model="showPop" position="bottom">
      <ul class="pop">
        <li v-for="(li,index) in CZFS" :key="index" @click="czfsSel(li)">{{li.name}}</li>
      </ul>
    </van-popup>
    <van-popup v-model="showSellTypePop" position="bottom">
      <ul class="pop">
        <li v-for="(li,index) in SellType" :key="index" @click="selltypeSel(li)">{{li.name}}</li>
      </ul>
    </van-popup>
    <van-popup v-model="showContractPop" position="bottom">
      <ul class="pop">
        <li v-for="(li,index) in Contract" :key="index" @click="contractSel(li)">{{li.name}}</li>
      </ul>
    </van-popup>
    <h2 class="info">平台名录  请联系客服</h2>
    <h3 class="free">免费提供</h3>
    <div class="weixin">
      <div>
        <h3>客服1号</h3>
        <img @click="swipeteImage(0)" src="../assets/kf1.jpg" alt>
      </div>
      <div>
        <h3>客服2号</h3>
        <img @click="swipeteImage(1)" src="../assets/kf2.jpg" alt>
      </div>
      <div>
        <h3>客服3号</h3>
        <img @click="swipeteImage(2)" src="../assets/kf3.jpg" alt>
      </div>
    </div>
    
    <van-button type="primary" @click="phonecall(tel,`意见反馈`)" class="mybtn" size="large">联系客服</van-button>
    <!-- <div class="tel">
            <div class="left">
                <a @click="phonecall(tel,`意见反馈`)"><i class="iconfont icon-dianhua"></i>意见反馈</a>
            </div>
            <div class="right">
                <a @click="phonecall(tel,`投诉电话`)"><i class="iconfont icon-dianhua"></i>投诉电话</a>
            </div>
    </div>-->
  </div>
</template>

<script>
import api from "@/api/api";
import { Dialog, Toast,ImagePreview } from "vant";
export default {
  data() {
    return {
      msg: "",
      tel: "051258732888"
    };
  },
  methods: {
    swipeteImage(index) {
      var img1 = require("../assets/kf1.jpg");
      var img2 = require("../assets/kf2.jpg");
      var img3 = require("../assets/kf3.jpg");
      ImagePreview({
        images: [img1, img2, img3],
        startPosition: index,
        showIndex: true,
        onClose() {
          // do something
        }
      });
    },
    phonecall(no, logType) {
      window.location.href = "tel://" + no;
      // let data = {
      //     EntID: this.$store.state.userInfo.EntID,
      //     EntName: this.$store.state.userInfo.EntName,
      //     UserName: this.$store.state.userInfo.XM,
      //     UserID: this.$store.state.userInfo.ID,
      //     OpenID: this.$store.state.userInfo.OpenID,
      //     LogType:logType
      // };
      // api.addPhoneLog(data);
      // return false;
    }
  }
};
</script>

<style scoped lang='less'>
.main {
  background: #fff;
  position: relative;
  .info{
    font-size: 16px;
    margin: 10px auto;
    color: red;
  }
  .free{
    color: red;
    margin-bottom: 30px;
  }
  .weixin {
    padding-left: 5px;
    > div {
      display: inline-block;
    }
    img {
      width: 6rem;
      height: 6rem;
      margin-right: 1em;
    }
  }
  .entlist {
    display: flex;
    flex-wrap: wrap;
    li {
      min-width: 50%;
      border-right: 1px solid #f2f2f2;
    }
    i {
      color: #2cb98e;
      font-size: 3em;
      text-align: center;
      display: block;
      margin-top: 0.5em;
    }
    h1 {
      font-size: 1.5em;
      font-weight: bold;
      color: #666;
      padding: 0;
      margin: 0;
    }
  }

  textarea {
    border: none;
    padding: 1em;
  }
  h1 {
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    line-height: 60px;
  }
  .mybtn {
    background: #2cb98e;
    width: 50%;
    margin-top: 2em;
  }
  .tel {
    margin-top: 1em;
    padding: 1em;
    height: 3em;
    color: #2cb98e;
    letter-spacing: 0.1em;
    .left {
      float: left;
      a {
        color: #2cb98e;
      }
    }
    .right {
      float: right;
      a {
        color: #2cb98e;
      }
    }
  }
}
</style>